<template>
  <div class="details">
    <ul>
      <li @click="changeTab(1)">li1</li>
      <li @click="changeTab(2)">li2</li>
      <li @click="changeTab(3)">li3</li>
    </ul>
    <component :is="com"></component>
  </div>
</template>

<script>
import tab1 from './pages/tab1'
import tab2 from './pages/tab2'
import tab3 from './pages/tab3'
export default {
  data () {
    return {
      com: 'tab1'
    }
  },
  mounted () {
    console.log(this.$route.query)
  },
  methods: {
    changeTab (n) {
      switch (n) {
        case 1: this.com = 'tab1'; break
        case 2: this.com = 'tab2'; break
        default: this.com = 'tab3'
      }
    }
  },
  components: {
    tab1, tab2, tab3
  }
}
</script>

<style scoped>

</style>
